<template>
	<view class="page-main" :style="pageStyle">
		<view class="text-area">
			<text class="thing" v-if="vuex_user.status!==0">
				我们恋爱{{Math.ceil((new Date().getTime() - config.partnerTime)/(1000*60*60*24))}}天啦
			</text>
			<text class="thing" v-else>
				你还没有绑定伴侣
			</text>
		</view>
		<u-row customStyle="margin-top: 30rpx;">
			<u-col span="4">
				<view class="text-area">
					<u-icon v-if="vuex_user.sex===1" name="man" color="#2979ff" size="30" customStyle="top:2px" />
					<u-icon v-else name="woman" color="#ff007f" size="30" customStyle="top:2px" />
				</view>
				<view class="text-area">
					<text class="lovers-call">
						{{vuex_user.nickname||'未登录'}}
					</text>
				</view>
				<view class="text-area text-integral">{{vuex_user.integral||0}}亲密值</view>
			</u-col>
			<u-col span="4">
				<view class="head-portrait">
					<u--image :src="config.avatar||'/static/touxiang.jpg'" @click="toUploadPage()" width="100px"
						height="100px" shape="circle" />
				</view>
			</u-col>
			<u-col span="4">
				<view class="text-area">
					<u-icon v-if="vuex_user.gender!=='1'" name="man" color="#2979ff" size="30" />
					<u-icon v-else name="woman" color="#ff007f" size="30" />
				</view>
				<view class="text-area">
					<text class="lovers-call">
						{{partner.nickname||'未绑定'}}
					</text>
				</view>
				<view class="text-area text-integral">{{partner.integral||0}}亲密值</view>
			</u-col>
		</u-row>
		<view class="fixed-bind-box" v-if="vuex_user.status===0">
			<view class="fixed-bind-button">
				<u-button color="rgb(255, 170, 127)" text="绑定伴侣" plain shape="circle" @click="toBindPartnerPage" />
			</view>
		</view>

		<login-popup v-model="showLoginPopup" />

		<u-popup mode="center" closeable :closeOnClickOverlay="false" round="15px" :show="showBindPopup"
			@close="showBindPopup=false">
			<view class="bind-popup">
				<view>
					<u--image customStyle="margin: auto;" :src="inviter.avatar" width="150rpx" height="150rpx"
						shape="circle" />
				</view>
				<view class="bind-popup-title">
					<text>{{inviter.nickname}}邀你绑定专属空间，是否同意？</text>
				</view>
				<view class="bind-popup-button">
					<u-button color="linear-gradient(#ff9bd4, #f51f9c)" text="确认绑定" shape="circle"
						@click="onBindClick()" />
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageStyle: '',
				partner: {},
				config: {},
				inviter: {},
				showBindPopup: false,
				showLoginPopup: false,
				isRefresh: false,
				inviterId: ''
			}
		},
		onLoad(option) {
			if (!this.vuex_user.id) {
				this.showLoginPopup = true
			}
			
			if (option.query&&option.query.deadline && option.query.deadline - new Date().getTime() > 0) {
				this.inviterId = option.query.inviterId
				this.showBindPopup = true
			}
			
			const tools = this.$tools
			const partner = tools.getPartner()
			if (partner) {
				this.partner = partner
				this.$http.get("/partnerConfig/get", {
					configId: this.user.configId
				}).then(res => {
					this.config = res.data
					tools.setPartnerConfig(res.data)
				})
			}

		},
		onShow() {
			if (this.vuex_user.id && this.showLoginPopup) {
				this.showLoginPopup = false
			}

			if (this.isRefresh) {
				const tools = this.$tools
				tools.updateCacheByUser().then((res) => {
					if (res) {
						this.user = tools.getUser();
						this.partner = tools.getPartner()
						if (tools.getPartnerConfig()) {
							this.config = tools.getPartnerConfig();
							const bg = this.config.pageBackground
							if (bg != this.pageStyle.background) {
								this.pageStyle = {
									background: bg.indexOf('http') >= 0 ? `url("${bg}") top repeat-y` : bg
								}
							}
						}
					}
				})
				return
			}
			this.isRefresh = true
		},
		onShareAppMessage(res) {
			return {
				title: '甜蜜小屋',
				desc: '快来记录你们的甜蜜瞬间',
				path: '/pages/index/index'
			}
		},
		onShareTimeline(res) {
			return {
				title: '快来记录你们的甜蜜瞬间',
				path: '/pages/index/index'
			}
		},
		onTabItemTap(e) { //导航栏按钮被单击

		},
		methods: {
			toUploadPage() {
				uni.navigateTo({
					url: '/pages/user/interfaceConfig/interfaceConfig'
				});
			},
			toBindPartnerPage() {
				uni.navigateTo({
					url: '/pages/user/bindPartner/bindPartner'
				});
			},
			onBindClick() {
				this.showBindPopup = false
				this.$http.get("/partnerConfig/add", {
					avatar: '/static/touxiang.jpg',
					pageBackground: '/static/index-background.jpg',
					level: '0',
				}).then(res => {
					uni.$u.toast('绑定成功');
					let configId = res.result.id,
						uId = this.user._id,
						pId = this.inviter._id

					this.user.state = '2'
					this.user.partnerId = configId
					this.$tools.setUser(this.user)

					this.partner = this.inviter
					this.$tools.setPartner(this.partner)

					this.inviter = null
					this.$tools.inviter = null

					db.collection('partner_config').doc(configId).get({
						getOne: true
					}).then(res => {
						this.config = res.result.data
						this.$tools.setPartnerConfig(this.config)
					})

					//更新邀请人绑定信息
					db.collection('user')
						.doc(pId)
						.update({
							partnerId: uId,
							configId: configId,
							state: '1'
						})
					//更新当前用户绑定信息
					db.collection('user')
						.doc(uId)
						.update({
							partnerId: pId,
							configId: configId,
							state: '2'
						})
				})

			}
		}
	}
</script>

<style lang="scss">
	.head-portrait {
		width: 100px;
		margin-left: auto;
		margin-right: auto;
		border: 8px solid #ffffff;
		border-radius: 100px
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.text-integral {
		font-size: 24rpx;
	}

	.thing {
		margin-top: 80rpx;
		font-size: 30rpx;
		color: #ff7d7f;
		font-weight: 600;
	}

	.lovers-call {
		margin: 10px 0;
	}

	.fixed-bind-box {
		position: fixed;
		bottom: 100rpx;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: center;

		.fixed-bind-button {
			width: 30%;
		}
	}

	.bind-popup {
		margin: 60rpx 50rpx;
		width: calc(100vw - 230rpx);
	}

	.bind-popup-title {
		margin: 30rpx 0;
	}

	.bind-popup-button {}

	.u-icon__icon.data-v-2ee87dc9.uicon-close {
		position: initial !important;
	}
</style>